<template>
    <div class="simple-system-temple">
        <div class="system-area fl">
            <el-form :label-position="labelPosition" label-width="80px" :model="systemDocking"
                     :ref="`${refName}SystemDocking`">
                <div class="title">{{title}}系统对接区</div>
                <el-form-item label="用户名：" class="input-form" prop="username"
                              :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
                    <el-input v-model="systemDocking.username" class="input" size="small"></el-input>
                </el-form-item>
                <el-form-item label="密码：" class="input-form" prop="password"
                              :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                    <el-input v-model="systemDocking.password" class="input" size="small"></el-input>
                </el-form-item>
                <el-form-item class="submit">
                    <el-button type="primary" @click="submitLogin(`${refName}SystemDocking`)" size="small">登录
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="split-line" v-if="showSearchArea"></div>
            <el-form v-if="showSearchArea" :inline="true" :model="systemSearch" label-width="80px"
                     :ref="`${refName}SystemSearch`">
                <div class="title">{{title}}系统查询区</div>
                <el-form-item label="" class="search">
                    <el-input v-model="systemSearch.searchValue" placeholder="请输入关键字" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="" class="select">
                    <el-select v-model="systemSearch.region" placeholder="全部" size="mini">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="submitSearch(`${refName}SystemSearch`)">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "simpleSystemTemplate",
        props: {
            refName: {
                required: true,
                type: String
            },
            title: {
                required: true,
                type: String
            },
            showSearchArea: {
                required: false,
                type: Boolean,
                default: () => {
                    return true
                }
            },
            systemDocking: {
                required: true,
                type: Object
            },
            systemSearch: {
                required: true,
                type: Object
            }
        },
        data() {
            return {
                labelPosition: 'right',
            }
        },
        methods: {
            /**
             * 登录
             * @param formName
             */
            submitLogin(formName) {
                this.$parent.submitLogin(this.$refs[formName]);
            },
            /**
             * 查询
             * @param formName
             */
            submitSearch(formName) {
                this.$parent.submitSearch(formName);
            }
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .simple-system-temple {
        .system-area {
            margin: 15px 80px;
            border: 1px solid #ddd;
            .title {
                margin: 10px auto;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .input-form {
                .el-form-item__label{
                    padding: 0 0 0 12px;
                }
                .el-form-item__content {
                    .el-input {
                        margin-right: 10px;
                    }
                    .el-form-item__error {
                        padding-top: 0;
                    }
                }
            }
            .submit .el-form-item__content {
                margin-left: 0 !important;
            }
            .search {
                width: 200px;
                margin-right: 0;
            }
            .select {
                width: 100px;
                margin-right: 2px;
            }
            .input {
                width: 330px;

            }
            .split-line {
                border-bottom: 1px dashed #d7d7d7;
                margin: 0 10px;
            }
        }
    }
</style>